<script>
import {defineComponent} from 'vue'
import instance from "@/api/axios";

export default defineComponent({
    name: "courseList",
    data(){
        return{
            courseList:[],
        }
    },
    created() {
        instance.post('https://wkt.myhope365.com//weChat/applet/course/list/type', {
            type:'free',
            pageNum: 2,
            pageSize: 5,
        }).then(res=>{
            console.log(res);
            this.courseList=res.rows;
        });
    }
})
</script>

<template>


    <div class="box">
        <div v-for="item in courseList" :key="item.courseId">
            <img :src="item.coverFileUrl">
            <div  style="font:20px bolder">{{ item.courseTitle }}</div>
            <div>{{ item.learningNum }}人学习</div>
            <div v-if="item.isFree==='1'" style="color: #42b983;font-weight: bolder">免费</div>
            <div v-else-if="item.isDiscount==='1'">现价:<span style="color: red;font-weight: bolder">￥{{item.discountPrice}}</span>&nbsp;原价:<del style="color: gray;font-weight: 300">￥{{item.coursePrice}}</del></div>
            <div v-else>价格<span style="color: red;font-weight: bolder">￥{{item.coursePrice}}</span></div>
        </div>
    </div>




</template>

<style scoped lang="less">
.box {
  display: flex;
  justify-content: space-evenly;
  >div{
    width: 19%;
  }
}
</style>